<template>
  <view class="page">
    <top-section />
    <center-section />
    <basic :scrollHeight="scrollViewHeight" />
  </view>
</template>

<script>
import TopSection from "./components/TopSection/TopSection.vue"
import CenterSection from "./components/CenterSection/CenterSection.vue"
import Basic from "./components/Basic/Basic.vue"

export default {
  name: "Menu",
  components: {
    TopSection,
    CenterSection,
    Basic
  },
  data() {
    return {
      currentMenuIndex: 0,
      scrollViewHeight: 0
    }
  },
  onLoad() {
    this.scrollViewHeight =
      uni.getSystemInfoSync().windowHeight -
      uni.getSystemInfoSync().statusBarHeight -
      44 -
      uni.upx2px(176)
  }
}
</script>

<style lang="scss" scoped>
page {
  background-color: #fff;
}

.page {
  width: 100%;
  height: 100%;
  background-color: #fff;
}

::v-deep {
  .uni-navbar__header-container {
    display: flex;
    align-items: center;
    padding: 0;
    .uni-searchbar {
      padding: 0;
    }
    .uni-searchbar__box {
      width: 300rpx;
    }
  }
}
</style>
